<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!--font-family-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">

    <!-- title of site -->
    <title>Dire</title>

    <!-- For favicon png -->
    <link rel="shortcut icon" type="image/icon"
          href="${pageContext.request.contextPath}/front/assets/logo/favicon.png"/>

    <!--font-awesome.min.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/font-awesome.min.css">

    <!--linear icon css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/linearicons.css">

    <!--animate.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/animate.css">

    <!--flaticon.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/flaticon.css">

    <!--slick.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/slick-theme.css">

    <!--bootstrap.min.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/bootstrap.min.css">

    <!-- bootsnav -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/bootsnav.css">

    <!--style.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/style.css">

    <!--responsive.css-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/assets/css/responsive.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>

<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->


<!-- top-area Start -->
<section class="top-area">
    <div class="header-area">
        <!-- Start Navigation -->
        <nav class="navbar navbar-default bootsnav  navbar-sticky navbar-scrollspy" data-minus-value-desktop="70"
             data-minus-value-mobile="55" data-speed="1000">

            <div class="container">

                <!-- Start Header Navigation -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="index.html">维也纳<span>酒店</span></a>

                </div><!--/.navbar-header-->
                <!-- End Header Navigation -->

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse menu-ui-design" id="navbar-menu">
                    <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                        <li class=" scroll active"><a href="#home">主页</a></li>
                        <li class="scroll"><a href="#explore">房间类型</a></li>
                        <li class="scroll"><a href="#typedetail">房间详情</a></li>
                        <c:if test="${!empty sessionScope.cuser}">

                            <li><a href="${pageContext.request.contextPath}/qianduan/index.jsp">${sessionScope.cuser.name}</a></li>
                            <li><a href="${pageContext.request.contextPath}/custom?method=exit">退出</a></li>
                        </c:if>
                        <c:if test="${empty sessionScope.cuser}">
                            <li><a href="${pageContext.request.contextPath}/coustom/login.jsp">登录</a></li>
                            <li><a href="${pageContext.request.contextPath}/coustom/register.jsp">注册</a></li>
                        </c:if>
                    </ul><!--/.nav -->
                </div><!-- /.navbar-collapse -->
            </div><!--/.container-->
        </nav><!--/nav-->
        <!-- End Navigation -->
    </div><!--/.header-area-->
    <div class="clearfix"></div>

</section><!-- /.top-area-->
<!-- top-area End -->

<!--welcome-hero start -->
<section id="home" class="welcome-hero">
    <div class="container">
        <div class="welcome-hero-txt">
            <h2>为您提供最好的服务 <br> 让您有家的感觉</h2>
            <p>
                因为有您我们才更专注
            </p>
        </div>
        <div class="welcome-hero-serch-box">
            <div class="welcome-hero-form">
                <div class="single-welcome-hero-form">
                    <h3>房间类型:</h3>

                    <select name="type" id="typeid">
                        <option value="0">---请选择-----</option>
                        <c:forEach items="${typeList}" var="type">
                            <option value="${type.id}">${type.name}</option>
                        </c:forEach>
                        <%--<option>二人间</option>--%>
                        <%--<option>三人间</option>--%>
                        <%--<option>四人间</option>--%>
                    </select>
                    <%--<div class="welcome-hero-form-icon">--%>
                    <%--<i class="flaticon-list-with-dots"></i>--%>
                    <%--</div>--%>
                </div>
                <div class="welcome-hero-serch">
                    <li class="scroll">
                        <a onclick="searchType(this)">
                            <button class="welcome-hero-btn">搜索 <i data-feather="search"></i></button>
                        </a>
                    </li>
                </div>
            </div>

        </div>
    </div>

</section><!--/.welcome-hero-->
<!--welcome-hero end -->

<!--explore start -->
<section id="explore">
    <div class="container">
        <div class="explore-content">
            <center><h2>房间类型</h2></center>
            <div class="container">
                <div class="row">
                    <c:forEach items="${typeList}" var="type">
                        <div class="col-md-4 col-sm-6">
                            <div class="single-explore-item">
                                <div class="single-explore-img">
                                    <img src="${type.imgpath}"
                                         alt="explore image">
                                    <div class="single-explore-img-info">
                                            <%--<button onclick="window.location.href='#'">${type.typename}</button>--%>
                                        <li class="scroll">
                                            <a onclick="getDetail(this,'${type.id}');">
                                                <button>${type.name} </button>
                                            </a>
                                        </li>
                                    </div>
                                </div>
                                <div class="single-explore-txt bg-theme-5">
                                    <h2>
                                        <li class="scroll">
                                            <a onclick="getDetail(this,'${type.id}');">
                                                    ${type.name}
                                            </a>
                                        </li>
                                    </h2>
                                    <p class="explore-rating-price">
                                    <h2>￥${type.money}/晚</h2>
                                    <h2>房间数量:${type.a}间</h2>
                                    </p>
                                    <div class="explore-open-close-part">
                                        <div class="row">
                                            <div class="col-sm-5">
                                                <li class="scroll">
                                                    <a onclick="getDetail(this,'${type.id}');">
                                                        <button class="close-btn">预定</button>
                                                    </a>
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <!--/.container-->
    </div>
</section>
<!--/.explore-->
<!--explore end -->

<!--房间的详情-->
<selection id="typedetail">
    <div class="container">
        <div class="explore-content">
            <center><h2>房间详情</h2></center>
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="single-explore-item">
                            <div class="single-explore-img">
                                <img src=""
                                     id="imgpath" alt="explore image">
                                <div class="single-explore-img-info">
                                    <button class="name"></button>
                                </div>
                            </div>
                            <div class="single-explore-txt bg-theme-5">
                                <h2><a class="name"></a></h2>
                                <p class="explore-rating-price">
                                    <span>￥<span class="money"></span>/晚</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <%--房间设施开始--%>
                    <div class="col-md-4 col-sm-6">
                        <span style="font-size: 20px;">房间设施:</span><br>
                        <div style="font-size: 18px" id="sslist">
                        </div>
                    </div>
                    <%--房间设施结束--%>
                    <%--预定div开始--%>
                    <div class="col-md-4 col-sm-6">
                        <form class="layui-form" action="">
                            <input type="hidden" id="rzdate" name="rzdate"/>
                            <input type="hidden" id="leavedate" name="leavedate">
                            <input type="hidden" id="roomtype" name="roomtype">
                            <input type="hidden" id="uid" name="uid" value="${sessionScope.cuser.id}">
                            <div class="layui-form-item">
                                <label class="layui-form-label">名字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" required lay-verify="required" placeholder="请输入名字"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="tel" required lay-verify="required|phone|number" placeholder="请输入电话"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="count" id="count" required lay-verify="number"
                                           placeholder="请输入数量"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">时间</label>
                                <div id="test3"></div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">总价:</label>
                                <span id="dcount" style="display: none"></span>
                                <div class="layui-input-inline">
                                    <span id="totalPrice" style="color: red; font-size: 20px"></span>
                                    <input type="hidden" name="price" id="price">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">预定</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <%--预定div结束--%>
                </div>
            </div>
        </div>
    </div>
    <!--[if IE]>
    <![endif]-->
</selection>


<!--footer start-->
<footer id="footer" class="footer">
    <div class="container">

        <div class="hm-footer-copyright">
            <div class="row">
                <div class="col-sm-5">
                    <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank"
                                                                                 href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                    </p><!--/p-->
                </div>
                <div class="col-sm-7">
                    <div class="footer-social">
                        <span><i class="fa fa-phone"> +1  (222) 777 8888</i></span>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-google-plus"></i></a>
                    </div>
                </div>
            </div>
        </div><!--/.hm-footer-copyright-->
    </div><!--/.container-->

    <div id="scroll-Top">
<%--        <div class="return-to-top">--%>
<%--            <i class="fa fa-angle-up " id="scroll-top" data-toggle="tooltip" data-placement="top" title=""--%>
<%--               data-original-title="Back to Top" aria-hidden="true"></i>--%>
<%--        </div>--%>

    </div><!--/.scroll-Top-->

</footer><!--/.footer-->
<!--footer end-->

<!-- Include all js compiled plugins (below), or include individual files as needed -->

<script src="${pageContext.request.contextPath}/front/assets/js/jquery.js"></script>

<!--modernizr.min.js-->
<script src="${pageContext.request.contextPath}/front/assets/js/modernizr.min.js"></script>

<!--bootstrap.min.js-->
<script src="${pageContext.request.contextPath}/front/assets/js/bootstrap.min.js"></script>

<!-- bootsnav js -->
<script src="${pageContext.request.contextPath}/front/assets/js/bootsnav.js"></script>

<!--feather.min.js-->
<script src="${pageContext.request.contextPath}/front/assets/js/feather.min.js"></script>

<!-- counter js -->
<script src="${pageContext.request.contextPath}/front/assets/js/jquery.counterup.min.js"></script>
<script src="${pageContext.request.contextPath}/front/assets/js/waypoints.min.js"></script>

<!--slick.min.js-->
<script src="${pageContext.request.contextPath}/front/assets/js/slick.min.js"></script>

<script src="${pageContext.request.contextPath}/front/assets/js/jquery.easing.min.js"></script>

<!--Custom JS-->
<script src="${pageContext.request.contextPath}/front/assets/js/custom.js"></script>
<script>
    var initLayDate = "";
    var $;
    layui.use(['laydate', 'jquery', 'layer', 'form'], function () {
        $ = layui.jquery;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;
        var flage = false;
        //剩余的房间数和日期
        var syDateAndCount = "";
        /**
         *初始化日期组件 默认几个日期不可用
         */
        initLayDate = {
            getRiLi: function (removedate) {
                var tt = new Object();
                if (removedate == "") {
                    //removedate=['2020-12-12','2020-12-23','2020-12-14'];
                    $("#test3").empty();
                    laydate.render({
                        elem: '#test3',
                        min: 0,
                        position: 'static',
                        mark: tt,
                        range: '~',
                        change: function (value) {
                            //给日期赋值
                            setValforDate(value);

                        }
                    });
                } else {
                    //alert(removedate);
                    $("#test3").empty();
                    for (var i = 0; i < removedate.length; i++) {
                        var sdate = removedate[i]; //记录时间
                        var date_array = sdate.split("-");
                        var date_day = date_array[2]; //取日期的天比如2017-09-11取11
                        tt[removedate[i]] = '<span style="color:#666;font-size: 14px;"><i class="layui-icon layui-icon-heart-fill" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + Number(date_day) + '</span>';

                        //初始日期控件
                    }
                    laydate.render({
                        elem: '#test3',
                        min: 0,
                        position: 'static',
                        mark: tt,
                        range: '~',
                        ready: function (value) {
                            var mm = value.year + '-' + value.month + '-' + value.date;
                            $.each(removedate, function (index, item) {
                                var item = changeTime(item);
                                //$('.layui-laydate table tbody').find('[lay-ymd="' + item + '"]').addClass('laydate-disabled');
                            })
                        },
                        change: function (value) {
                            flage = false;
                            var dateTime = value.split('~');
                            var startTime = dateTime[0].replace(/-/g, "/");
                            var endTime = dateTime[1].replace(/-/g, "/");

                            var s = Date.parse(startTime);
                            var e = new Date(endTime).getTime();
                            //如果选择的时间段之内有房间已满的情况就不允许选择
                            $.each(removedate, function (index, item) {
                                var disabletime = item.replace(/-/g, "/");
                                var f = isDuringDate(s, e, disabletime);
                                if (f) {
                                    flage = true;
                                }
                                //var item=changeTime(item);
                                //$('.layui-laydate table tbody').find('[lay-ymd="' + item + '"]').addClass('laydate-disabled');

                            })
                            if (!flage) {
                                setValforDate(value);
                            } else {
                                layer.msg("当前时间段之内有的房间已满")
                            }

                        }
                    });
                }
            }
        }


        //
        $("#typedetail").hide();
        /**
         * 监听form表单的提交事件
         */
        form.on('submit(formDemo)', function (data) {
            // 获取id
            let id = $("#uid").val();
            // // 获取价格
            // let jg = Number($(".money").text());
            // // 获取共住几天
            // let dcount = Number($("#dcount").text());
            // // 获得共几天
            // let count = Number($("#count").val());
            // let total = count * dcount * jg;
            // $("#price").val(total);
            // $("#totalPrice").html(total+"元");
            if (id != null && id !== "") {
                layer.msg(JSON.stringify(data.field));
                // flage为true证明选择的时间 存在已经满房的情况  故不能提交
                // if (flage) {
                //     return false;
                // }
                $.ajax({
                    url: "addOrder",
                    data: data.field,
                    async: false,
                    success: function (r) {
                        if (r > 0) {
                            // alert("预定成功");
                            layer.msg("祝贺您，预定成功！！！")
                            getDetail(null, data.field.roomtype);
                        } else {
                            //alert("预定失败")
                            layer.msg("房间不足，请您修改房间的数量之后重新提交！！！！")
                        }
                    }
                });
            } else {
                layer.msg("请先登录");
            }
            return false;
        });
    });


    //某个时间段室内是否含有这个时间如果含有就返回true 否则就false
    function isDuringDate(beginDateStr, endDateStr, dateStr) {
        var curDate = new Date(dateStr),
            beginDate = new Date(beginDateStr),
            endDate = new Date(endDateStr);
        if (curDate >= beginDate && curDate < endDate) {
            return true;
        }
        return false;
    }

    /*
    *搜索按钮
    * getDetail(this,null);
    * */
    function searchType(obj) {
        //
        var typeid = $("#typeid").val();
        // alert(typeid);
        // alert(typeof typeid);
        if (typeid == 0) {
            alert("请选择房间类型");
            return;
        }
        getDetail(obj, typeid);
    }

    //获取房间的详情
    function getDetail(obj, data) {

        $("#typedetail").show();
        var syAndManDate = "";
        $.ajax({
            url: "${pageContext.request.contextPath}/findTypeById",
            type: "post",
            data: {typeid: data},
            dataType: "json",
            async: false,
            success: function (da) {
                //类型的信息
                var d = da.typeMess;
                //已满的日期  以及每天还剩多少房
                syAndManDate = da.orderMess;
                $.each(d,function (prop,obj) {
                    if (prop == "id") {
                        $("#roomtype").val(obj);
                    } if(prop == "imgpath"){
                        $("#imgpath").attr("src",obj);
                    } else {
                        $("." + prop).text(obj);
                    }
                })
                // alert(JSON.stringify(da.sheshiMess));
                let ss = da.sheshiMess;
                $("#sslist").empty();
                $.each(ss,function (i,elem) {
                    let info = "<span>"+ elem+"</span>  ";
                    info += "<span>1台</span><br>";
                    $("#sslist").append(info);
                })
            }
        });

        if (obj != null) {
            $(obj).attr("href", "#typedetail");
        }

        //加载日历框
        //syAndManDate如果为空证明这个类型的房间还没有被预定过
        if (syAndManDate == undefined) {
            initLayDate.getRiLi('');
        } else {
            //
            syDateAndCount = syAndManDate.srDate;
            //alert(JSON.stringify(syDateAndCount));
            //alert("已满的时间是:"+syAndManDate.manDate);
            initLayDate.getRiLi(syAndManDate.manDate);
            //获取日期  以及他们对应的剩余的房间数

        }

    }

    function changeTime(times) {
        var time = times.split("-");
        var year = time[0];
        var month = time[1];
        if (Number(month) < 10) {
            //将数据库中传过来的01变为1
            month = Number(month);
            //alert(Number(month));
        }
        var day = time[2];
        if (Number(day) < 10) {
            //将数据库中传过来的01变为1
            day = Number(day);
        }
        var item = year + "-" + month + "-" + day;
        return item;
    }

    function setValforDate(value) {
        var dateTime = value.split('~');
        var startTime = dateTime[0].replace(/-/g, "/");
        var endTime = dateTime[1].replace(/-/g, "/");

        var startTime1 = dateTime[0];
        var endTime1 = dateTime[1];
        var s = Date.parse(startTime);
        var e = new Date(endTime).getTime();
        //计算两个时间间隔天数
        var d = (Number(e) - Number(s)) / (1000 * 60 * 60 * 24);
        if (d > 30) {
            layer.msg('最多选择30天');
        }
        if (d < 1) {
            layer.msg("您至少需要预定1天");
        }

        $("#dcount").text(d);
        $("#rzdate").val($.trim(startTime1));
        $("#leavedate").val($.trim(endTime1));

        // 获取价格
        let jg = Number($(".money").text());
        // 获取共住几天
        let dcount = Number($("#dcount").text());
        // 获得共几天
        let count = Number($("#count").val());
        let total = count * dcount * jg;
        $("#price").val(total);
        $("#totalPrice").html(total+"元");
    }

    $("#count").change(function (){
        // alert(" 数量值发生 ");
        let dcount = Number($("#dcount").text().trim());
        if(dcount!=null){
            // 获取价格
            let jg = Number($(".money").text());
            // 获取共住几天

            // 获得共几天
            let count = Number($(this).val().trim());
            let total = count * dcount * jg;
            $("#price").val(total);
            $("#totalPrice").html(total+"元");
        }
    })

</script>
</body>

</html>